<template>
    <view class="order">
        <!-- <view class="my-segmented-control-box">
            <uni-segmented-control
                :current="current" 
                :values="items" 
                styleType="text" 
                activeColor="#d1df58"
                class="my-segmented-control"
                @clickItem="onClickItem"
            ></uni-segmented-control>
        </view> -->
        <!-- <view 
            class="slot-box slot-text"
            style="display: inline-block; margin-top: 10rpx; width: 100%;"
        >
            <view class="slot-box-row-1" style="border-bottom: 0;">
                <view class="slot-box-row-1-left">
                    <image
                        src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/logo.png" 
                        :draggable="false"
                        mode="scaleToFill"
                        class="slot-img-1"
                    ></image>
                    <view class="slot-box-row-1-left-text">积分余额：100</view>
                </view>
            </view>
        </view> -->
        <uni-list :border="true">
            <uni-list-item
                v-for="(item, index) in checkList"
                :key="index"
                title=""
                rightText=""
                note=""
                thumb=""
                thumbSize="lg"
            >
                <template v-slot:header>
                </template>
                <template v-slot:body>
                    <view class="slot-box slot-text">
                        <view class="slot-box-row-1">
                            <view class="slot-box-row-1-left">
                                <image
                                    src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/logo.png" 
                                    :draggable="false"
                                    mode="scaleToFill"
                                    class="slot-img-1"
                                ></image>
                                <view class="slot-box-row-1-left-text">积分兑换</view>
                            </view>
                            <view class="slot-box-row-1-right">
                                {{ item.zso_ex4 }}
                            </view>
                        </view>
                        <view class="slot-box-row-2">
                            <image
                                :src="item.zsoi_ex5?.split(',')[0]" 
                                :draggable="false"
                                mode="scaleToFill"
                                class="slot-box-row-2-img"
                            ></image>
                            <view class="slot-box-row-2-text">
                                <view class="slot-box-row-2-text-1">{{ item.zso_ex1 }}  {{ item.zsoi_ex6}}</view>
                                <!-- <view class=""></view> -->
                                <view class="slot-box-row-2-text-2">{{ item.zsoi_ex6 }}</view>
                                <view class="slot-box-row-2-text-3">
                                    <view class="slot-box-row-2-text-3-left">
                                        {{ Number(item.zsoi_ex2).toFixed(2) }}积分
                                    </view>
                                    <view class="slot-box-row-2-text-3-right">
                                        x{{ item.zsoi_ex3 }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="slot-box-row-3">
                            <view class="slot-box-row-3-left">
                                实付：
                            </view>
                            <view class="slot-box-row-3-right">
                                {{ Number(item.zsoi_ex4).toFixed(2) }}积分
                            </view>
                        </view>  
                        <view class="slot-box-row-7 slot-text-color-1">
                            <!-- <view 
                                class="iconfont icon-shanchu"
                                :class="[(item.zso_ex4 == '已完成' || item.zso_ex4 == '已取消') ? 'slot-icon-2-1' : 'slot-icon-2-2']"
                                @click="deleteOrder(item, index)"
                            ></view> -->
                            <!-- 用上面这个空view就删了 -->
                            <view></view>
                            <view style="display: flex; align-items: center;">
                                <button
                                    type="default"
                                    plain
                                    :disabled="item.zo_ex73 == '是'"
                                    style="margin-right: 10rpx;"
                                    class="slot-btn"
                                    
                                    @click="callPhone"
                                >
                                    联系客服
                                </button>
                                <!-- <button
                                    type="default"
                                    plain
                                    :disabled="item.zo_ex73 == '是'"
                                    style="margin-right: 10rpx;"
                                    class="slot-btn"
                                    
                                    @click="cancelOrder(item, index)"
                                >
                                    取消订单
                                </button> -->
                                <button
                                    type="default"
                                    plain
                                    :disabled="item.zo_ex73 == '是'"
                                    class="slot-btn"
                                    @click="lookDetail(item)"
                                >
                                    订单详情
                                </button>
                                <!-- <button
                                    type="primary"
                                    plain
                                    disabled
                                    class="slot-btn"
                                    @click="payOrder(item)"
                                >
                                    支付
                                </button> -->
                                
                            </view>
                        </view>
                    </view>
                </template>
                <!-- <template v-slot:footer>
                    <view class="btn-box">
                        <button
                            type="primary"
                            class="btn"
                            @click="payOrder(item)"
                        >
                            支付
                        </button>
                    </view>
                </template> -->
            </uni-list-item>
        </uni-list>
        <uni-load-more :status="status"></uni-load-more>
        <uni-popup
            ref="popup1" 
            type="center"
            :is-mask-click="true"
        >
                <view class="my-popup-box">
                    <view class="my-popup-box-img">
                        <view class="my-popup-box-img-text">订单详情</view>
                    </view>
                    <view class="my-popup-box-content">
                        <view 
                            v-if="formData.zsoi_ex7 != 'null' && formData.zsoi_ex8 != 'null' && formData.zsoi_ex7 != '' && formData.zsoi_ex8 != ''"
                            class="my-popup-box-content-text-1"
                            style="display: flex; justify-content: space-between; align-items: center; color: #ce8e1a;"
                        >
                            <view class="">
                                {{ formData.zsoi_ex7 }}：{{ formData.zsoi_ex8 }}
                            </view>
                            <button
                                size="mini"
                                type="default"
                                style=""
                                @click="setClipboardData(formData.zsoi_ex8)"
                            >
                                复制
                            </button>
                        </view>
                        <view  style="border-bottom: 1rpx solid #d8c7c7; margin-bottom: 10rpx"></view>
                        <view class="my-popup-box-content-text-1">订单编号：{{formData.zsoi_no}}</view>
                        <view class="my-popup-box-content-text-1">创建时间：{{formData.zso_create_time}}</view>
                        <view class="my-popup-box-content-text-1">备注：{{formData.zsoi_ex14}}</view>
                        <view class="my-popup-box-content-text-1">收货地址：{{formData.zso_ex5}}</view>
                        <view  style="border-bottom: 1rpx solid #d8c7c7; margin-bottom: 10rpx"></view>
                        <uni-steps
                            direction="column"
                            :options="steps.options" 
                            :active="steps.active"
                        ></uni-steps>
                    </view>
                    <!-- <view style="display: flex; padding-top: 20rpx; box-sizing: border-box;">
                        <button
                            size="mini"
                            type="warn"
                            style=""
                            @click="popup1.close()"
                        >
                            取消
                        </button>
                        <button
                            size="mini"
                            style="background: #2979ff; color: #fff; "
                            @click="popup1.close();"
                        >
                            确认
                        </button>
                    </view> -->
                </view>
         </uni-popup>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
    import { markRaw, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { orderListApi, hideOrderApi } from '@/apis'
    const popup1: Ref<any> = ref(null)
    const formData:Ref<any> = ref({
        
    })
    const steps:Ref<any> = ref({
        options: [
            {
                title: '事件四',
                desc: '2023-01-05'
            },
            {
                title: '事件三',
                desc: '2023-01-04'
            }, 
            {
                title: '事件二',
                desc: '2023-01-03'
            },
            {
                title: '事件一',
                desc: '2023-01-02'
            }
        ],
        active: 1
    })
    const checkList:Ref<any> = ref([
        // {
        //     zso_ex4: '已取消', //状态
        //     zso_ex1: '12瓶装易捷水', //标题
        //     zsoi_ex4: 120, //积分
        //     zsoi_ex3: 1, //数量
        //     zso_ex5: '地址', //地址
        //     zsoi_no: '73695326398670', //订单编号
        //     zsoi_ex5: 'http://oss3.smartyoke.com/putaway/23e338cee2cb4428b7a29f45e4ff0268.jpg', //图片
        // }
    ])
    const status: Ref<string> = ref('loading') //more: 加载前 loading: 加载中 no-more: 没有更多数据
    const pageNo: Ref<number> = ref(1)
    const pageSize: Ref<number> = ref(10)
    
    const items: Ref<string[]> = ref(['全部', '待处理', '已确认', '任务中', '已完成', '已取消'])
    const current: Ref<number> = ref(0)
    
    const onClickItem = (e) => {
        if (current.value != e.currentIndex) {
            current.value = e.currentIndex;
            checkList.value = []
            status.value = 'loading'
            pageNo.value = 1
            orderListApi({
                status: current.value == 0 ? '' : items.value[current.value], //待处理，已确认，任务中，已完成，已取消
                pageNo: pageNo.value, //第几页,默认从1开始
                pageSize: pageSize.value, //每页几条
            }).then((res: any) => {
               console.log(res.data)
               checkList.value = res.data
               
               // status.value = 'no-more'
               if (res.data.length == pageSize.value) {
                   status.value = 'more'
               } else {
                   status.value = 'no-more'
               }
            }).catch((e) => {
                status.value = 'no-more'
            }).finally(() => {
                // status.value = 'no-more'
            })
        }
    }
    onLoad((val) => {
        status.value = 'loading'
        pageNo.value = 1
        orderListApi({
            status: current.value == 0 ? '' : items.value[current.value], //待处理，已确认，任务中，已完成，已取消
            pageNo: pageNo.value, //第几页,默认从1开始
            pageSize: pageSize.value, //每页几条
        }).then((res: any) => {
           console.log(res.data)
           checkList.value = res.data
           
           // status.value = 'no-more'
           if (res.data.length == pageSize.value) {
               status.value = 'more'
           } else {
               status.value = 'no-more'
           }
        }).catch((e) => {
            status.value = 'no-more'
        }).finally(() => {
            // status.value = 'no-more'
        })
    })

    // 下拉刷新重新加载数据
    onPullDownRefresh(() => {
       status.value = 'loading'
       pageNo.value = 1
       orderListApi({
           status: current.value == 0 ? '' : items.value[current.value], //待处理，已确认，任务中，已完成，已取消
           pageNo: pageNo.value, //第几页,默认从1开始
           pageSize: pageSize.value, //每页几条
       }).then((res: any) => {
           console.log(res.data)
           checkList.value = res.data
           
            // status.value = 'no-more'
            if (res.data.length == pageSize.value) {
                status.value = 'more'
            } else {
                status.value = 'no-more'
            }
       }).catch((e) => {
            status.value = 'no-more'
        }).finally(() => {
            // status.value = 'no-more'
            uni.stopPullDownRefresh();
        })
    })


    // 上拉加载数据
    onReachBottom(() => {
       if (status.value = 'more') {
           status.value = 'loading'
           pageNo.value++
           orderListApi({
               status: current.value == 0 ? '' : items.value[current.value], //待处理，已确认，任务中，已完成，已取消
                pageNo: pageNo.value, //第几页,默认从1开始
                pageSize: pageSize.value, //每页几条
           }).then((res: any) => {
               console.log(res.data)
               // res.data.unshift(...checkList.value)
               // checkList.value = res.data
               checkList.value.push(...res.data)
               if (res.data.length == pageSize.value) {
                   status.value = 'more'
               } else {
                   status.value = 'no-more'
               }
           }).catch((e) => {
                status.value = 'no-more'
            }).finally(() => {
                // status.value = 'no-more'
            })
       }
    })
    const payOrder = () => {
        // 支付
    }
    const deleteOrder = (val, index) => {
        // 删除
        if (val.status == '已完成' || val.status == '已取消') {
            uni.showModal({
                showCancel: true,
                title: '温馨提示',
                content: '请确认是否删除！', 
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        checkList.value.splice(index, 1)
                        hideOrderApi({
                            zo_id: val.zo_id
                        })
                        // 调删除接口
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        } else {
            uni.showModal({
                showCancel: true,
                title: '温馨提示',
                content: '订单暂未完成！', 
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        // 调删除接口
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        }
        
    }
    const callPhone = () => {
        uni.makePhoneCall({
            phoneNumber: '4008897120',
            success: () => {
                console.log('成功')
            },
            fail: () => {
                console.log('失败')
            },
            complete: () => {
                console.log('一定走')
            }
        })
    }
    const cancelOrder = (val: any, index: number) => {
        uni.showModal({
            showCancel: true,
            title: '温馨提示',
            content: '是否确定取消订单？', //订单已形成 稍后客服人员会与你联系 请保持电话通畅
            success: function (res1) {
                if (res1.confirm) {
                	console.log('用户点击确定');
                    // 调接口取消订单
                    checkList.value.splice(index, 1)
                    
                } else if (res1.cancel) {
                	console.log('用户点击取消');
                }
            }
        });
    }
    const lookDetail = (val: any) => {
        formData.value = val;
        steps.value.options = val.options
        steps.value.active = val.active
        popup1.value.open();
    }
    const setClipboardData = (val: any) => {
        uni.setClipboardData({
        	data: val,
            showToast: true,
        	success: function () {
        		console.log('success');
        	}
        });
    }
</script>

<style lang="scss" scoped>
    .order {
        min-height: 100vh;
        background-color: #f2f2f2;
    }
    .my-segmented-control {
        width: 100%;
        position: fixed; 
        top: 0;
        z-index: 100;
        background-color: #f2f2f2;
    }
    .my-segmented-control-box {
        height: 80rpx;
    }
    .btn-box {
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
            width: 100rpx;
            height: 60rpx;
            display: flex;
            font-size: 30rpx;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    /* list样式修改 */
    .slot-box {
        // margin-top: 10rpx;
        flex: 1;
    	display: flex;
    	flex-direction: column;
        background: rgb(255, 255, 255);
        border-radius: 40rpx;
        box-sizing: border-box;
        padding: 20rpx;
        .slot-box-row-1 {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            border-bottom: 1rpx solid #fff5f5;
            box-sizing: border-box;
            padding: 12rpx 0;
            .slot-box-row-1-left {
                flex: 1;
                display: flex;
                align-items: center;
                .slot-img-1 {
                    width: 40rpx;
                    height: 40rpx;
                }
                .slot-box-row-1-left-text {
                    // color: #999;
                    box-sizing: border-box;
                    padding-left: 10rpx;
                    flex: 1;
                }
            }
            .slot-box-row-1-right {
                color: #999;
                width: 110rpx;
                text-align: right;
            }
        }
        
        .slot-box-row-2 {
            background: #fff;
            display: flex;
            padding: 10rpx 0;
            box-sizing: border-box;
            // border-bottom: 1rpx solid #fff5f5;
            .slot-box-row-2-img {
                width: 200rpx;
                height: 200rpx
            }
            .slot-box-row-2-text {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                box-sizing: border-box;
                padding-left: 10rpx;
                .slot-box-row-2-text-1 {
                    
                }
                .slot-box-row-2-text-2 {
                    // width: 300rpx;
                    box-sizing: border-box;
                    text-align: center;
                    padding: 5rpx;
                    background: #dae4f2;
                    font-size: 20rpx;
                    align-self: flex-start;
                    // background: rgb(218, 228, 242);
                }
                .slot-box-row-2-text-3 {
                    display: flex;
                    align-self: flex-end;
                    .slot-box-row-2-text-3-left {
                        // color: #f2403c;
                        // font-weight: bold;
                    }
                    .slot-box-row-2-text-3-right {
                        padding-left: 20rpx;
                        color: #999999;
                    }
                }
            }
        }
        .slot-box-row-3 {
            background: #fff;
            display: flex;
            justify-content: flex-end;
            padding: 10rpx 0;
            box-sizing: border-box;
            border-bottom: 1rpx solid #fff5f5;
            .slot-box-row-3-left {
                // color: #999999;
            }
            .slot-box-row-3-right {
                // padding-left: 20rpx;
                color: #f2403c;
                font-weight: bold;
            }
        }
    }
    .slot-text {
    	font-size: 30rpx;
        .slot-text-color-1 {
            color: #535353;
            padding: 10rpx 0;
            font-size: 26rpx;
        }
        .slot-text-color-2 {
            color: #999;
        }
    }
    .slot-box-row-7 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .slot-icon-2-1 {
            font-size: 40rpx;
            color: #000;
        }
        .slot-icon-2-2 {
            font-size: 40rpx;
            color: rgb(219, 219, 219);
        }
        .slot-btn {
            // margin: 0;
            font-size: 20rpx;
        }
    }
    
    
    :deep(.uni-list) {
        // margin-top: 10rpx;
        background-color: rgba(0, 0, 0, 0) !important;
        .uni-list-item {
            background-color: rgba(0, 0, 0, 0) !important;
        }
    }
    :deep(.uni-list-item__container) {
        padding: 10rpx 10rpx !important;
        padding-left: 10rpx !important;
    }
    // 列表标题title,note
    :deep(.uni-list-item__content-title) {
        font-size: 30rpx;
    }
    :deep(.uni-list-item__content-note) {
        font-size: 30rpx;
    }
    :deep(.uni-list--border:after) {
        background-color: rgba(0,0,0,0) !important;
    }
    .my-popup-box {
        background: #fff; 
        width: 600rpx; 
        box-sizing: border-box; 
        padding: 0 0 30rpx 0; 
        border-radius: 40rpx;
        .my-popup-box-img {
            background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/transshipmentInformation/popup-bg-2.png); 
            background-size:100% 100%; 
            width:100%; 
            height: 150rpx; 
            border-radius: 50rpx 50rpx 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .my-popup-box-img-text {
                font-size: 30rpx;
                letter-spacing: 10rpx;
                font-weight: bold;
            }
        }
        .my-popup-box-content {
            font-size: 26rpx; 
            box-sizing: border-box; 
            padding: 30rpx;
            height: 500rpx;
            overflow: auto;
            .my-popup-box-content-text-1 {
                padding-bottom: 20rpx;
            }
        }
    }
    // 图标竖向显示有问题，很离谱，手动修改
    :deep(.my-popup-box .uni-steps__column-line-item) {
        height: 100rpx !important;
    }
</style>
